| try new simplest step | 您所在的位置：网站首页 › visual basical › try new simplest step |
|
Web 学习笔记
By sensor 2022-02-14 web browser Browser engine(rendering engine)function: transform HTML documents and other resources of a web page into an interactive visual representation by renderer process. reference: inside web browser part3. render process:main thread parse HTML and turn it into a Document Object Model (DOM). When the HTML parser finds a tag, it pauses the parsing and execute the JavaScript code because JavaScript can change the data of the document. The process is diagramed in parsing model. Parsing an HTML document into a DOM is defined by the HTML-live-standard. main thread parses CSS and determines the computed style for each DOM node and layout tree which has 2d information like x y coordinates and bounding box sizes, and painting process like “background first, then text, then rectangle”. compositor thread separate parts of a page into layers, rasterize them separately, and composite them as a page then raster thread turns this information into pixels on the screen. use Optimized JavaScript Execution like requestAnimationFrame to make sure you javascript code run at the start of the frame and keep your JavaScript to something in the region of 3-4ms. browser process: preload scanner peeks at tokens generated by HTML parser and sends requests to the network thread in the browser process to load resources. Comparison of browser engines browser objectreference: 浏览器对象 window:全局作用域，而且表示浏览器窗口 navigator:浏览器 or platform 信息, which can be used for browser compatibility. screen对象表示屏幕的信息 location对象表示当前页面的URL信息 location.href => current page url location.host => host domain location.reload() => reload page location.assign(url) => open url document:a browser’s internal representation of the page as well as the data structure and API that web developer can interact with via JavaScript. document.cookie 读取到当前页面的Cookie,服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现，主流浏览器均支持httpOnly选项. document.title => page title history保存了page的历史记录,这个对象属于历史遗留对象，对于现代Web页面来说，由于大量使用AJAX和页面交互，简单粗暴地调用history.back()可能会让用户感到非常愤怒。 DOM change DOM node innerHTML 不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树 innerText或textContent:这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签.innerText不返回隐藏元素的文本，而textContent返回所有文本 style属性对应所有的CSS，可以直接获取或设置.需要在JavaScript中改写-为驼峰式命名 like fontSize appendChild，把一个子节点添加到父节点的最后一个子节点,and delete the original node. parentElement: get parent element children[indexNumber]: get child element by indexNumber createElement:create a element node but dont insert it into document. it is in the memory. exmaple:创建了一个节点，然后把它添加到节点的末尾，这样就动态地给文档添加了新的CSS定义 removeChild: remove child element but still accessible in the memory. insertBefore : parentElement.insertBefore(newElement, referenceElement); 子节点会插入到referenceElement之前。 setAttribute : set element attri input(select) node: input.value => get user input for input type=”radio” or “checkbox”, use element.checked => get user selection submit input: use ’s form.submit() in button click event function by ’s onsubmit event: onsubmit="return checkForm()" 来告诉浏览器if继续提交 and set button type to “submit”. 安全考虑，提交表单时不传输明文口令，而是口令的MD5, e.g. pwd.value = toMD5(pwd.value);但用户输入了口令提交时，口令框的显示会突然从几个变成32个（因为MD5有32个字符）.可以利用 hide md5 password, 没有name属性的的数据不会被提交. to submit file, 表单的enctype必须指定为multipart/form-data，method必须指定为post. 出于安全考虑，浏览器只允许用户点击来选择本地文件，用JavaScript对的value accesssing can only get the file name submitted by user. HTML一个html页面由众多元素(element)嵌套组成，每个元素可以有很多属性(attributes)。比如一个超链接元素a： My blog其内嵌套了三个span单行内联元素。 元素的class是全局属性，即每个element都可以使用，超文本引用(href)则只有部分element可以使用，可参考W3C-html教程和HTML 参考手册。 html的标准目前由WHATWG发布，标准内容请见 HTML-live-standard。 load Web page browsering contexts浏览交互环境中，将HTML文档(Document)对象呈现于用户面前。context本意为交汇 attributes 微数据itemscope、itemtype、itemprop 用于Web DOM 标记和搜索引擎优化（SEO） example javascript:void(0)利用#javascript:void(0);,既不会跳转到新的空白页，也不会做啥操作。 date-urlimage date-url HTML5 API File CSS basical conceptscss3中-moz、-ms、-webkit,-o visual formatting model effect filter CSS属性将模糊或颜色偏移等图形效果应用于元素,filter：alpha（opacity=0）是opacity=0的IE8以下兼容写法。 perspective 指定观察视角z轴高度。动画特效 animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。animation 不受transition控制，是和它完全独立的。rotateY的参数是绝对坐标，不是移动量，rotateY(0deg);是回到原地。 float ：指定一个元素应沿其容器的左侧或右侧放置 如果有多个这样的元素，则会按行，从左或右排列 元素的居中 position: relative; /* top: 50%; */ left: 25%; /* float: left; */ /* width: auto; */ width: 50%;position 的 left 和 top 是相对于父容器的空间位置，如果为relative则会和其他元素分享空间，为absolute则不会。width同样是相对于父容器的空间。 transformmatrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() ) displaysome elements have default display attribute like or . If you change them , the browser view it as invalid attr name. ul displayul子元素li默认都是block,所以垂直分布的，要使其水平分布，可以指定li分布为 float:right || left 或 $('ul').css("display", "flex") 使ul元素自由分布，这时候它会根据元素空间自由排布。如果要改回来只要 $('ul').css("display", "block")。list-style-type 则用于显示特效，比如下划线或前缀黑点。 例子： 主页 Search header nav>ul { display: flex; }这里只是nav的直系ul获得了flex属性 header nav ul { display: flex; }所有子ul都获得flex属性 nested link a; hi, I am Monstorby tag, all your nested are treated like in a iframe and will not cut the wrapper . line-wrapwhite-space:nowrap; single line no wrap flexflex 布局的基本概念 flex-grow,flex-shrink,flex-basis allocate space by flex-basis if spare-space > 0 , then allocate it by flex-grow rate elseif spare-space < 0 , then allocate it by flex-shrink rate. box-sizingwhen parent box has fixed size, content-box may overflow, just set the child box as border-box. content-box: border and padding dont include in content border-box : make sure the child box’s border include in parent box. but it only works in static condition. when child box is transformed to bigger scale by hovering, then just use overflow:hidden; in parent box. box widthif you dont assign percentage width to box , it may not strench with different screen scale. element selector .openaside a.inactive{} select a including class .inactive. .openaside a .inactive{}select all elements including class .inactive nested in a. ECMA Standard AgentsJavaScript note js 局部变量的作用域居然可以到present context 下的函数内部，例如forEach的函数参数 Object is not array but array is object. getElementsByTagName obtained nodes is array-like object，instead of array，which cant use forEach straightly, but can apply Array.from().forEach() to it. array.length works but object not,instead it use Object.keys(obj).lengthif id is not defined, element.id = “” instead of undefined !”” === !0 === !undefined === true while(“”) == while(0) == while(false) npmnpm: node package module. here is tutorial yarn is a pkg management tool. here is tutorial npm和yarn的区别 npm install pkg:vue JQUERYJQUERY 介绍 jQuery Basics 教程 JQUERY 的选择器类名同样要加.前缀，以和html元素名区分，但功能函数内不用，比如o.children("a").toggleClass("active"); var a = $(‘.red.green’); 选择class中包含.red与.green交集的元素 var a = $(‘.nav-center .links.show-links’) 选择.nav-center家族子辈.links.show-links $(‘.nav-center,.links.show-links’)逗号代表多选，但部分非全面版本的JQuery不支持，可能会忽略逗号后的内容。 $(‘.openaside’).children(“a”).toggleClass(“.active”); 选择直系子元素，并翻转类.active的存在 HTTPFetch mechanism浏览器中Javascript的加载和执行 application manipulate clipboard embed Javascript in browser Javascript objectJavascript 对象机制 里讲的很清楚，一下是我的总结。 encapsulatejs 因为没有类(class)，所以通过构造函数统一生成对象，通过给构造函数一个原型(prototype)属性，分离私有和共用数据和方法，并利用isPrototypeOf()辨别原型，用hasOwnProperty()或in识别属性。在构造函数内，利用this关联一个对象，孰通过 new 方法调该构造函数，这使孰具有了constructor属性。可见，js的对象封装完全依赖构造函数及其原型，构造函数相当于js的class，prototype则是该伪类的原型对象。 inherit by constructor通过call 或 apply 方法，将子对象通过this引用传递给父对象,如 function Father(hobby,gender){ this.hobby = hobby this.gender = gender } function Son(hobby,gender,age="1"){ Father.call(this,hobby,gender) this.age = age } console.log(new Son("travel","male").hobby); // expected output: "travel"也可通过 prototype 属性继承，但要注意修改构造函数： function Father(hobby,gender){ this.hobby = hobby this.gender = gender } function Son(age){ this.age = age } console.log(Son.prototype.constructor.name) // 对象调用Father构造函数，则constructor属性为Father Son.prototype = new Father("smoke", "male") console.log(Son.prototype.constructor.name) // 将Son的构造函数改回来 Son.prototype.constructor = Son console.log(Son.prototype.constructor.name) console.log(new Son("15").hobby);如果只想继承构造函数的prototype，也可用如下方式： function Father(hobby,gender){ this.hobby = hobby this.gender = gender } Father.prototype.species = "human"; function Son(age){ this.age = age } //js中万物皆可操作如对象，连函数也不例外 Son.extend = function(Parent) { const F = function(){ console.log("fuck") }; // js 对象复制的是引用，改一个就是该一双 F.prototype = Parent.prototype; console.log(F.prototype.constructor.name) // F原型的构造函数不再是F，但这不影响F函数本身的执行 this.prototype = new F(); console.log(this.prototype.constructor.name) this.prototype.constructor = this; // 在子对象上打开一条通道，可以直接调用父对象的方法 this.uber = Parent.prototype; } Son.extend(Father); console.log(new Son("15").species); by copy prototype利用原型对象，直接创建新构造函数： let Chinese = { language: 'Chinese', "skin-color": "yellow", nation: "China", hi: function () { console.log("cao") } }; function fork (o) { function F () { } F.prototype = o; return new F(); } let me = fork(Chinese) for (let i in me) { console.log(i + ":" + typeof i) } // hi is a string? me.hi() // function doesnt include? console.log(typeof me.constructor)利用递归调用，逐个复制子对象，避免子数组和对象只拷贝地址： let Doctor = { profession: "Math", subLanguage: "English", Majors: [ "Category", "topology", [ "number theory", "set theory", ], { teach: "Trigonometry", counse: "Probability and Statistics", }, ], hobby: ["math", "juggle"] } let me = { age: "200" } function deepCopy (obj) { for (let k in obj) { //Array 是对象类型 if (typeof obj[k] !== 'object') { this[k] = obj[k] } else { this[k] = obj[k].constructor === Array ? [] : {}; deepCopy.call(this[k], obj[k]) } } } function deepShow (obj, num = 0) { let keys = Object.keys(obj || {}) let lastKey = keys[keys.length - 1] for (let k in obj) { //Array 是对象类型 let v = obj[k] let indent = " ".repeat(num) if (typeof v !== 'object') { console.log(indent + k + ": " + v + ",") } else { let comma = "," if (num == 0 && k === lastKey) comma = ";\n" + obj.constructor.name + "\n" num++; console.log(indent + k + ":") // Array 对象构造器 为 Array if (v.constructor === Array) { console.log(indent + "[") deepShow(v, num) console.log(indent + "]" + comma) num--; } else { console.log(indent + "{") deepShow(v, num) console.log(indent + "}" + comma) num--; } } } } deepCopy.call(me, Doctor) deepShow(me) let you = new deepCopy(Doctor) deepShow(you) RegExpJavaScript RegExp ref regCheck match patterns match link a with name name ^(?=.{8,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?or ^(?=[a-zA-Z0-9._]{1,6}$)(?!.*[_.]{2})(?!.*[_.]$)[^_.].* language grammar markdown {% include _partial/post/footer.html %} |
| CopyRight 2018-2019 实验室设备网 版权所有 |